<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/layui/layui.js"></script>
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
<body>
	<div>
		<form class="layui-form" action="">
			姓名：
			<div class="layui-inline">
				<input class="layui-input" id="stu_name" autocomplete="off">
			</div>
			性别：
			<div class="layui-inline">
				<input class="layui-input" id="sex" autocomplete="off">
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">班级</label>
				<div class="layui-input-inline">
					<select class="clazz" id="class_id" name="class_id" lay-filter="aihao">
						<option value="">请选择一个班级</option>
						<option value="1">J1801</option>
						<option value="2">J1802</option>
						<option value="3">J1803</option>
						<option value="4">J1804</option>
						<option value="5">J1805</option>
						
					</select>
				</div>
			</div>

			<button type="button" class="layui-btn" onclick="searchBtn()">检索</button>
			<button type="button" class="layui-btn" onclick="add()">添加</button>
		</form>
	</div>

<!-- 添加 -->
<form class="layui-form" action="" id=insert style="display: none;">

  <div class="layui-form-item">
    <label class="layui-form-label">姓名：</label>
    <div class="layui-input-block">
      <input type="text" id="aname" name="title" lay-verify="title" autocomplete="off" style="width: 180px" placeholder="请输入姓名" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄：</label>
    <div class="layui-input-block">
      <input type="text" id="aage" name="title" lay-verify="title" autocomplete="off" style="width: 180px" placeholder="请输入年龄" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别：</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" onclick="addSaveBtn()" >立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div> 
</form>
<!-- 添加结束 -->

<!-- 修改 -->
<div>
<form class="layui-form" action="" lay-filter="fm" id="updateWin" style="display: none;">
<input type="hidden" name ="sid" id="usid"/><br/>
  <div class="layui-form-item">
    <label class="layui-form-label">姓名：</label>
    <div class="layui-input-block">
      <input type="text" id="usname" name="stu_name" lay-verify="title" autocomplete="off" style="width: 180px" placeholder="请输入姓名" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄：</label>
    <div class="layui-input-block">
      <input type="text" id="uage" name="age" lay-verify="title" autocomplete="off" style="width: 180px" placeholder="请输入年龄" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别：</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" onclick="updateSaveBtn()" >立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div> 
</form>
</div>

<!-- 修改结束 -->
	<table id="demo" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 
<script>
//预加载
$(function(){
	searchBtn();
})
var tableObj;
var updateIndex;
function searchBtn(){
layui.use(['form','jquery','table'], function(){
	  var form = layui.form;
	  var $ = layui.jquery;
	  var table = layui.table;
  
  
  //第一个实例
  tableObj=table.render({
    elem: '#demo'
    ,url: 'stu/findAll.do' //数据接口
    ,page: true //开启分页
    ,where:{
    	stu_name:$("#stu_name").val(),
    	sex:$("#sex").val(),
    	class_id:$("#class_id").val()
    
    }
    ,cols: [[ //表头
      {field: 'stu_id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'stu_name', title: '真实姓名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'mtel', title: '电话号', width:80} 
      ,{field: 'qq', title: 'QQ', width: 177}
      ,{field: 'birthday', title: '生日', width: 80, sort: true}
      ,{field: '', title: '班级', width: 80,templet:function(d){return d.clazz.classname}}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  });
//监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
    	var sid = data.sid;
      if(confirm("确认删除吗")){
    	 $.post("StudentdelServelt",{
    		 sid:sid
    	 },function(res){
    		 if(res=="true"){
    			 layer.msg("删除成功");
    			 tableObj.reload();
    		 }
    	 }) 
      }
    } else if(obj.event === 'edit'){
    	form.val("fm",data)
       	updateIndex = layer.open({
    	   type:1,
    	   content:$("#updateWin"),
    	   area:['300px','400px']
       })
    }
  });
  
});
}
//点击添加弹出窗体
var insertadd
function add() {
	insertadd=layer.open({
		 type: 1, 
		 content:$("#insert"),
		 area:["300px","400px"]
		});     	  
}
/* 点击提交 */
function addSaveBtn() {
	var name=$("#aname").val();
	var age=$("#aage").val();
	var sex=$("input[name='sex']:checked").val();
	/*二次确认  */
	if (confirm("确认提交吗？")) {
		$.post("StudentAddServelt",{
			name:name,
			age:age,
			sex:sex
		},function(res){
			if (res=="true") {
				layer.msg("添加成功");
				layer.close(insertadd);
				tableObj.reload();
			}
		})
		
	}
}
//点击修改保存按钮
function updateSaveBtn(){
	var sid=$("#usid").val();
	var name=$("#usname").val();
	var sex=$("input[name='sex']:checked").val();
	var age=$("#uage").val();
	if(confirm("确认提交吗")){
		$.post("StudentupdateServelt",{
			name:name,
			sid:sid,
			age:age,
			sex:sex,
		},function(res){
			if(res=="true"){
				layer.msg("修改成功");
				layer.close(updateIndex);
				tableObj.reload();
			}
		})
	}
}
</script>

<script>
	layui.use(['form','jquery','table'], function(){
	  var form = layui.form;
	  var $ = layui.jquery;
	  var table = layui.table;
	//加载类别
	  $.post(
		"clazz/findAll.do",
		function(res){
			for(var i=0;i<res.length;i++){
				//console.log(res[i])
				var str = "<option value='"+res[i].class_id+"'>"+res[i].classname+"</option>";
				$(".clazz").append($(str));
				form.render();
			}
		},"json"
	  );
	  
		});
	</script>
</body>
</html>